<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:98:"D:\PHPStudy\PHPTutorial\WWW\HM\pdingzone\public/../addons/hmls_wisdom_school\view\index\index.html";i:1545723586;}*/ ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>智慧校园</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/hmls_wisdom_school/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/hmls_wisdom_school/static/bootstrap/js/bootstrap.js">
    <link rel="stylesheet" href="/hmls_wisdom_school/static/jquery-2.1.4.min.js">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>

        .header{
            text-align: center;
            color: #bea81e;
        }
        .search{
            margin-top: 2%;
            margin-bottom: 5%;
            text-align: center;
        }
        .inp{
            margin: 0 auto;
        }
        /*.content{*/
            /*text-align: center;*/
        /*}*/
        .table{
            margin-top: 1%;
        }
        .badge{
            background-color: #337ab7;
        }
    </style>
</head>
<body>
    <div class="container-fluid header" >
        <div class="row">
            <h1 class="hidden-sm hidden-xs">智 慧 校 园</h1>
            <h3 class="hidden-md hidden-lg">智 慧 校 园</h3>
        </div>
    </div>
    <div class="container-fluid search">
        <div class="row">
            <form id="myform" onsubmit="return false">
                <div class="col-xs-7 col-md-4  col-xs-offset-1 col-md-offset-4" style="padding-right: 0">
                    <input type="text" name="student" class="form-control" placeholder="请输入学生学号或姓名">
                </div>

                <div class="col-xs-3 col-md-1">
                    <button type="submit" class="btn btn-default" onclick="search()">搜索</button>
                </div>
            </form>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-md-9 content col-md-offset-2 hidden-sm hidden-xs" id="content">
            </div>
            <div class="col-xs-10 col-md-9 content col-xs-offset-1 hidden-md hidden-lg" id="mobileContent">

            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-5 content col-md-offset-4" style="position: absolute;top: 50%;">
        <div class="alert alert-danger alert-dismissable hide" role="alert" style="text-align: center">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h5>暂无此学生信息</h5>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <script>
        function search() {
            $.ajax({
                type: "POST",//方法
                url: "hmls_wisdom_school/index/search" ,//表单接收url
                data: $('#myform').serialize(),
                success: function (data) {
                    //提交成功的其他反馈代码

                    if (data != null) {
                        var table=document.createElement("table");
                        table.className = 'table table-bordered';
                        var div = document.getElementById("content");
                        div.prepend(table);
                        var tbody = document.createElement('tbody');
                        table.appendChild(tbody);


                        var header = document.createElement("tr");
                        tbody.appendChild(header);
                        var name = document.createElement("td");
                        name.innerHTML = '姓名';
                        header.appendChild(name);
                        var student_id = document.createElement("td");
                        student_id.innerHTML = '学号';
                        header.appendChild(student_id);
                        var clas = document.createElement('td');
                        clas.innerHTML = '班级';
                        header.appendChild(clas);
                        var tel = document.createElement('td');
                        tel.innerHTML = '电话';
                        header.appendChild(tel);
                        var room = document.createElement('td');
                        room.innerHTML = '宿舍号';
                        header.appendChild(room);
                        var parent = document.createElement('td');
                        parent.innerHTML = '家长姓名';
                        header.appendChild(parent);
                        var ptel = document.createElement('td');
                        ptel.innerHTML = '家长电话';
                        header.appendChild(ptel);
                        var family = document.createElement('td');
                        family.innerHTML = '家庭电话';
                        header.appendChild(family);
                        var teacher = document.createElement('td');
                        teacher.innerHTML = '班主任姓名';
                        header.appendChild(teacher);
                        var ftel = document.createElement('td');
                        ftel.innerHTML = '班主任电话';
                        header.appendChild(ftel);

                        var body = document.createElement("tr");
                        tbody.appendChild(body);
                        var myname = document.createElement("td");
                        myname.innerHTML = data.name;
                        body.appendChild(myname);
                        var sid = document.createElement("td");
                        sid.innerHTML = data.student_id; // 学号
                        body.appendChild(sid);
                        var cla = document.createElement("td");
                        cla.innerHTML = data.class;  // 班级
                        body.appendChild(cla);
                        var mytel = document.createElement("td");
                        mytel.innerHTML = data.tel;  // 电话
                        body.appendChild(mytel);
                        var rom = document.createElement("td");
                        rom.innerHTML = data.room_id;  // 宿舍号
                        body.appendChild(rom);
                        var pname = document.createElement("td");
                        pname.innerHTML = data.parent_name;  // 家长姓名
                        body.appendChild(pname);
                        var pt = document.createElement("td");
                        pt.innerHTML = data.parent_tel; // 家长电话
                        body.appendChild(pt);
                        var famtel = document.createElement("td");
                        famtel.innerHTML = data.family_tel;  // 家庭电话
                        body.appendChild(famtel);
                        var tname = document.createElement("td");
                        tname.innerHTML = data.teacher_name;   // 班主任姓名
                        body.appendChild(tname);
                        var tetel = document.createElement("td");
                        tetel.innerHTML = data.teacher_tel; // 班主任电话
                        body.appendChild(tetel);

                        // 生成mobile页内容
                        var ul = document.createElement("ul");
                        ul.className = "list-group";
                        var mdiv = document.getElementById("mobileContent");
                        mdiv.prepend(ul);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "姓名";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.name;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "学号";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.student_id;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "班级";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.class;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "电话";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.tel;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "宿舍号";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.room_id;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "家长姓名";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.parent_name;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "家长电话";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.parent_tel;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "家庭电话";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.family_tel;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "班主任姓名";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.teacher_name;
                        li.appendChild(span);

                        var li = document.createElement("li");
                        li.className = "list-group-item";
                        li.innerHTML = "班主任电话";
                        ul.appendChild(li);
                        var span = document.createElement("span");
                        span.className = "badge";
                        span.innerHTML = data.teacher_tel;
                        li.appendChild(span);


                    }else{
                        $('.alert-danger').removeClass('hide').addClass('in');
                        setTimeout("$('.alert-danger').removeClass('in').addClass('hide')",1000)
                    }
                },
                
            });
        }
    </script>
</body>
</html>